<template>
 <div class="projectManage">
    <a-row>
      <a-col :span="24">
        <a-card :bordered="false">
          <template #title>
            <span style="margin-right: 14px;">项目管理列表</span>
            <a-button style="float: right;" @click="handleAddFun" class="customBut customQueryBut">新增</a-button>
          </template>
          <div class="ownTable">
            <a-table
              bordered
              class="userInfoTable"
              :columns="projectColumns"
              :data-source="projectData"
              :pagination="pagination"
              @change="handleTableChange"
            >
              <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'createTime'">
                  {{ text === null ? '' : ConvertToDateFun(text, "yyyy-MM-dd HH:mm:ss") }}
                </template>
                <template v-else-if="column.dataIndex === 'operate'">
                    <span title="修改" class="operateSapn" @click="handleClickExitFun(record)">修改</span>
                    <span title="编辑" class="operateSapn" @click="handleClickEditFun(record.id)">编辑</span>
                    <span title="组态" class="operateSapn" @click="handleClickJumpFun(record.id)">组态</span>
                    <span title="删除" class="operateSapn">删除</span>
                </template>
                <template v-else-if="column.dataIndex === 'projectAttr'">
                    <span title="查看" class="operateSapn">查看</span>
                </template>
              </template>
            </a-table>
          </div>
        </a-card>
      </a-col>
    </a-row>
 </div>
<AddAndExitProject ref="addAndExitProjectRef" @loadProjectListsFun="loadProjectListsFun" />
<EditProject ref="editProjectRef" @loadProjectListsFun="loadProjectListsFun" />

</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import router from '@/router';
  import { storeToRefs } from 'pinia';
  import { useRouterStore } from '@/store/router';
  import { message } from 'ant-design-vue';
  import { ConvertToDateFun } from '@/utils/secret';
  import { AllProjects, Info, DeleteProjects } from '@/api/index';
  import EditProject from '@/components/web/modal/editProject.vue'
  import AddAndExitProject from '@/components/web/modal/addAndExitProject.vue'
  
  const routerStore = useRouterStore();
  const { activeProjectId, activeProjectList } = storeToRefs(routerStore);

  const editProjectRef = ref(null);
  const addAndExitProjectRef = ref(null);
  const projectColumns = ref<any[]>([
    {
        title: "操作",
        align: "center",
        dataIndex: 'operate',
        checked: true,
        width: 200,
        fixed: 'left',
    },
    {
        title: '项目名称',
        dataIndex: 'projectName',
        align: "center",
    },
    {
        title: '项目描述',
        dataIndex: 'projectDesc',
        align: "center",
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        align: "center",
    },
    {
        title: '项目属性配置',
        dataIndex: 'projectAttr',
        align: "center",
    },
  ]);
  const projectData = ref<any[]>([]);
  const pagination = reactive({
    total: 0,
    current: 1,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '20', '40'],
  });
  const handleTableChange = (page:any) => {
    pagination.current = page.current;
    pagination.pageSize = page.pageSize;
    loadProjectListsFun();
  }
  onMounted(() => {
    loadProjectListsFun();
  })

  const loadProjectListsFun = async () => {
    console.log('加载项目列表');
    const res = await AllProjects({
      current: pagination.current,
      size: pagination.pageSize,
    });
    if(res) {
      if(res.code === 1000) {
        projectData.value = res.data.records;
        pagination.total = res.data.total;
      } else {
        message.error(res.msg);
      }
    }
  }

  const handleAddFun = () => {
    console.log('新增项目');
    addAndExitProjectRef.value.showModal();
  }
  const handleClickExitFun = (record: any) => {
    console.log('修改项目', record);
    addAndExitProjectRef.value.showModal(record);
  }
  const handleClickEditFun = async (id: number) => {
    console.log('编辑项目', id);
    const res = await Info({
      id: id,
    });
    if(res) {
      if(res.code === 1000) {
        editProjectRef.value.showModal(res.data);
      } else {
        message.error(res.msg);
      }
    }
  }

  const handleClickJumpFun = async (id: number) => {
    console.log('跳转组态', id);
    
    const res = await Info({
      id: id,
    });
    if(res) {
      if(res.code === 1000) {
        activeProjectId.value = id;
        activeProjectList.value = res.data;
        router.push('/configManage');
        // if(res.data.properties.length > 0) {
        //   editProjectRef.value.showModal(res.data);
        // } else {
        //   message.error('该项目未配置属性');
        // }
      } else {
        message.error(res.msg);
      }
    }
  }
</script>

<style scoped>

</style>
